<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../day4/font-awesome-4.6.3/css/font-awesome.min.css"/>
		<script src="../课件/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
//				$('dd').hide()
				$('dt').each(function(index){
					$('dt').click(function(){
						if($(this).next().is(":hidden")){
							$(this).parent().find('dd').show();
							$(this).find('i').removeClass().addClass('fa fa-minus');
						}
						else {
							$(this).parent().find('dd').slideUp();
						    $(this).find($('i')).removeClass().addClass('fa fa-plus');
						}
				    });
				});
				
//				$(function() {
//				$("li:has(ul)").css("list-style-image", "url(img/-.gif)").click(function(event) {//为包含ul元素的li定义点击事件
//						if ($(this).children().is(":hidden")) {
//							$(this).css("list-style-image", "url(img/-.gif)").children().slideDown()
//						} else {
//							$(this).css("list-style-image", "url(img/1.gif)").children().slideUp()
//						}
//				});
//				$("li:not(:has(ul))").css("list-style","none")
//			});
			})
		</script>
	</head>
	<body>
		<dl>
			<dt><i class="fa fa-minus"></i>&nbsp;&nbsp;列表1</dt>
			<dd>aaa</dd>
			<dd>bbb</dd>
			<dd>ccc</dd>
			<dd>ddd</dd>
		</dl>
		<dl>
			<dt><i class="fa fa-minus"></i>&nbsp;&nbsp;列表2</dt>
			<dd>aaa</dd>
			<dd>bbb</dd>
			<dd>ccc</dd>
			<dd>ddd</dd>
		</dl>
		<dl>
			<dt><i class="fa fa-minus"></i>&nbsp;&nbsp;列表3</dt>
			<dd>aaa</dd>
			<dd>bbb</dd>
			<dd>ccc</dd>
			<dd>ddd</dd>
		</dl>
		<dl>
			<dt><i class="fa fa-minus"></i>&nbsp;&nbsp;列表4</dt>
			<dd>aaa</dd>
			<dd>bbb</dd>
			<dd>ccc</dd>
			<dd>ddd</dd>
		</dl>
		
		<!--<li>主题市场
				<ul>
					<li>运动派</li>
					<li>有车族</li>
					<li>生活家</li>
				</ul>
			</li>
			<li>特色购物
				<ul>
					<li>淘宝二手</li>
					<li>拍卖会</li>
					<li>爱逛街</li>
					<li>全球购</li>
					<li>淘女郎</li>
				</ul>
			</li>
			<li>优惠促销
				<ul>
					<li>天天特价</li>
					<li>免费试用</li>
					<li>清仓</li>
					<li>1元起拍</li>
				</ul>
			</li>
			<li>工具</li>
		</ul>-->
	</body>
</html>
